"CSS Menu, Dropdown menu, Responsive Menu"
Bootstrap 3.0.0 Snippet by Chandan Kumar

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mnbx"> <div class="navbar-header navhdrbx"> <button type="button" class="navbar-toggle menubtn collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="http://www.doweb.in" target="_blank"><img src="http://www.doweb.in/images/logo.png" alt="Doweb website designing company" height="58"></a> </div> <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" style="display:none"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Home <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Chairman's Message</a></li> <li><a href="#">Vision, Mission & Philosophy</a></li> <li><a href="#">Team</a></li> </ul> </li> <li><a href="#">About us</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Website design</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Digital Media</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">Products</a></li> <li><a href="#">Clientele</a></li> <li><a href="#">contact us</a></li> <li><a href="#">Enquiry Us</a></li> </ul> </div> </div>
body {background:#0e0e0e;}.mnbx {border-bottom:#ddd solid 1px;padding:0 20px;display:block;width:500px;} .navbar-toggle .icon-bar {background:#fff;} .menubtn{margin:8px 0 0!important;background:#444!important;border:none!important;padding:15px!important;display:block;}.menubtn:hover,.menubtn:visited{background:#ffdd00!important;color:#333;}.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover{background:#333!important;color:#fff;} .navbar-nav {width:100%;} .navbar-nav li{border-bottom:#cecece solid 1px!important;float:none;} .navbar-nav > li > a {color:#000;background:#eee;} .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{background:#333!important;color:#fff!important;} .dropdown-menu ul{list-style:none;padding-left:0} .dropdown-menu ul li a{color:#777;display:block;text-decoration:none;padding:3px 5px 3px 40px;} .dropdown-menu ul li a:hover{background:#333!important;color:#fff!important;} .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {background:#333!important;color:#fff!important;} .navbar-collapse.collapse {display:none;} .navbar-header {float:none;}

Related: See More


Questions / Comments: